<template>
    <div class="user-data__filter-item">
        <a-input v-model:value="blurry" allow-clear placeholder="编号/名称/账号" />
    </div>
    <div class="user-data__filter-item">
        <a-select placeholder="状态" v-model:value="status" :allowClear="true">
            <a-select-option value="1">正常</a-select-option>
            <a-select-option value="2">冻结</a-select-option>
            <a-select-option value="3">删除</a-select-option>
        </a-select>
    </div>
    <!-- <div class="user-data__filter-item">
        <a-select placeholder="类型">
            <a-select-option value="lucy">lucy</a-select-option>
        </a-select>
    </div> -->
    <!-- 字典行业 -->
    <div class="user-data__filter-item">
        <a-select placeholder="选择行业" v-model:value="industryId" :allowClear="true">
            <a-select-option :value="item.id" v-for="(item, index) in industryList" :key="index">{{
                item.value
            }}</a-select-option>
        </a-select>
    </div>

    <div class="user-data__filter-item">
        <yl-search-reset :loading="loading" @submit="handleSubmit" @reset="handleReset"></yl-search-reset>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, onMounted } from 'vue';

import ylSearchReset from '@/components/ylSeachReset.vue';
import { useI18n } from 'vue-i18n';
import { getDictDetails } from '@/api/system';
// getDictDetails

export default defineComponent({
    name: 'user-filter',
    components: {
        ylSearchReset,
    },
    props: {
        hideEnabled: {
            type: Boolean,
            default: () => false,
        },
    },
    emits: ['onSubmit', 'onReset'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const state = reactive({
            blurry: '',
            status: null,
            industryId: null,
        });
        const loading = ref<boolean>(false);
        const industryList = ref<[]>([]);
        onMounted(() => {
            getDictDetailList();
        });
        const handleSubmit = () => {
            emit('onSubmit', state);
        };
        const handleReset = () => {
            state.blurry = '';
            state.status = null;
            state.industryId = null;
            emit('onReset', state);
        };

        // 获取字典详情列表
        const getDictDetailList = async () => {
            const params = {
                page: 0,
                size: 99,
                dictName: 'industry',
            };
            const list = await getDictDetails(params);

            industryList.value = list.content;
            // state.dataSource = response.content.map((item) => {
            //     return {
            //         ...item,
            //         name: props.checkedDict.name,
            //     };
            // });
        };

        return {
            ...toRefs(state),
            loading,
            handleSubmit,
            handleReset,
            t,
            getDictDetailList,
            industryList,
        };
    },
});
</script>
<style lang="scss" scoped>
.user-data__filter-item {
    margin-right: $width20;
    &:last-child {
        margin-right: $width0;
    }
}
</style>
